<!-- 组织结构树  输入搜索框-->
<template>
  <!-- https://www.vue-treeselect.cn/#node -->
  <treeselect
    v-model="dep_id"
    :multiple="multiple"
    :options="depTree"
    :show-count="false"
    placeholder="可根据组织名称搜索"
    no-results-text="未找到匹配项"
    :normalizer="normalizer"
    :default-expand-level="1"
    @input="depInputChange"
    @select="depSelected"
  />
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { tree } from '@/api/sys/Department'
const topDepId = '0'
const topDep = [
  {
    depCode: null,
    depName: '顶级组织',
    id: topDepId,
    parentId: topDepId
  }
]
export default {
  name: 'DepTreeInputSearch',
  components: {
    Treeselect
  },
  props: {
    // 输入框输入改变时回调方法
    depInputChange: {
      type: Function,
      default(value, instanceId) {
        console.log('请自定义:depInputChange函数')
      }
    },
    // 是否在挂载时家在数据
    loadOnMounted: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 树被选中时回调方法
    depSelected: {
      type: Function,
      default(node, instanceId) {

      }
    },
    // 加载时，会把这个值付给dep_id,即dep_id的值
    value: {
      type: [String, Number, Array],
      default() {
        return null
      }
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      dep_id: null,
      depTree: [],
      normalizer(node) {
        // 去掉children=[]的children属性 respectively
        if (node.children && !node.children.length) {
          delete node.children
        }
        if (node.depName) {
          node.label = node.depName
        }
      }
    }
  },
  mounted() {
    if (this.loadOnMounted) {
      this.getDepTree()
    }
    this.dep_id = this.value
  },
  methods: {
    getDepTree() {
      tree().then(res => {
        if (!res || !res.data || this.value === topDepId) {
          this.depTree = topDep
        } else {
          this.depTree = res.data
        }
      })
    }
  }
}
</script>

<style >
  /*
  .el-form-item--small .el-form-item__content {
    line-height: 16px;
  }*/
  .vue-treeselect__control{
    height: 30px;
  }
  .vue-treeselect__placeholder, .vue-treeselect__single-value{
    line-height: 28px;
    font-size: small;
  }
  .vue-treeselect__menu{
    font-size: small;
  }
</style>
